<template>
      <div class="zb_nr">
        <el-dialog title="举报信息" :visible.sync="dialogFormVisible" width="80%">
          <el-form :model="form">
            <el-form-item label="项目名称：" :label-width="formLabelWidth">
              <div class="xians">{{ form.projectName }}</div>
            </el-form-item>
            <el-form-item label="公司名称：" :label-width="formLabelWidth">
              <div class="xians">{{ form.name }}</div>
            </el-form-item>
            <el-form-item label="举报发起者：" :label-width="formLabelWidth">
              <div class="xians">{{ form.myName }}</div>
            </el-form-item>
            <el-form-item label="举报说明：" :label-width="formLabelWidth">
              <div class="xians">{{ form.sm }}</div>
            </el-form-item>
            <el-form-item label="举报原因：" :label-width="formLabelWidth">
              <div class="xians">{{ form.resource }}</div>
            </el-form-item>
            <el-form-item label="举报时间：" :label-width="formLabelWidth">
              <div class="xians">{{ form.createTime }}</div>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog_footer">
              <div v-if="form.pass === '0'">
                <el-button @click="changePsss(form)" size="mini" type="danger">
                  通过
                </el-button>
                <el-button @click="changeUnPsss(form)" size="mini" type="danger">
                  不通过
                </el-button>
              </div>
              <div v-else-if="form.pass === '1'" class="pass">已通过</div>
              <div v-else-if="form.pass === '-1'" class="unPass">不通过</div>
          </div>
        </el-dialog>
        <el-table :data="juBPage" class="table">
          <el-table-column prop="projectName" label="项目名称" fixed="left" width="250px"></el-table-column>
          <el-table-column prop="name" label="公司名称" width="250px"></el-table-column>
          <el-table-column prop="myName" label="举报发起者" width="200px"></el-table-column>
          <el-table-column label="是否隐藏" width="100px">
            <template slot-scope="scope">
              <div>{{ scope.row.hide ? '是' : '否' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="举报时间" sortable width="180px"></el-table-column>
          <el-table-column fixed="right" label="举报文件" width="100px">
            <template slot-scope="scope">
              <el-button @click="handleTb(scope.$index, scope.row)" size="mini" type="danger" class="butt">{{ scope.row.fileName ? '下载' : '暂无文件' }}</el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right"  label="审核信息" width="120px">
              <template slot-scope="scope">
                <el-button @click="shenH(scope.row)" type="primary">去审核</el-button>
              </template>
          </el-table-column>
          <!-- <el-table-column fixed="right" label="是否审核通过" width="200px">
            <template slot-scope="scope">
              <div v-if="scope.row.pass === '0'">
                <el-button @click="changePsss(scope.row)" size="mini" type="danger">
                  通过
                </el-button>
                <el-button @click="changeUnPsss(scope.row)" size="mini" type="danger">
                  不通过
                </el-button>
              </div>
              <div v-else-if="scope.row.pass === '1'" class="pass">已通过</div>
              <div v-else-if="scope.row.pass === '-1'" class="unPass">不通过</div>
            </template>
          </el-table-column> -->
        </el-table>
        <el-pagination background layout="prev, pager, next" @current-change="changePage" :current-page="1" :page-count="page"></el-pagination>
      </div>
</template>

<script>
// 举报信息审核
import { Notification } from 'element-ui'
import { getJuBao, getJuBaoFile, updateCheck } from '@/api/juBao'
import { getSysUser } from '@/api/user'
export default {
  data () {
    return {
      page: 0,
      url: [],
      juBao: [],
      juBPage: [],
      jbFile: [
        { name: '', url: [] }
      ],
      imgUrl: [{ name: '', url: [] }],
      type: '',
      fileItem: [{ name: '', fileName: [] }],
      dialogFormVisible: false,
      formLabelWidth: '15%',
      form: {
        projectName: '',
        name: '',
        peopleName: '',
        myName: '',
        sm: '',
        resource: '',
        createTime: '',
        pass: undefined
      }
    }
  },
  props: ['search'],
  computed: {
    name () {
      return this.$store.getters.name
    }
  },
  async created () {
    const res = await getSysUser(this.name)
    this.user = res.data
    if (this.user.admin2 !== 1 && this.user.admin3 !== 1) {
      this.$message({
        message: '暂无该权限',
        type: 'error'
      })
      this.$store.commit('zbUn/setSearchInfo', { search: '', show: 1 })
      this.$router.go()
    }
    if (this.search !== null && this.search !== '') {
      const { data: { JuBao, url } } = await getJuBao(this.search)
      this.juBao = JuBao
      this.url = url
      this.page = this.juBao.length / 5
      this.juBPage = this.juBao.slice(0, 5)
    } else {
      const { data: { JuBao, url } } = await getJuBao()
      this.juBao = JuBao
      this.url = url
      this.page = this.juBao.length / 5
      this.juBPage = this.juBao.slice(0, 5)
    }
  },
  methods: {
    async getJuB (JuBao, url, res) {
      this.juBao = JuBao
      if (url.length !== 0) {
        for (let i = 0; i < JuBao.length; i++) {
          // this.fileItem[i].name = JuBao[i].name
          // this.imgUrl[i].name = JuBao[i].name
          this.fileItem[i] = Object.assign({}, this.fileItem[i], { name: JuBao[i].name, fileName: [] })
          this.imgUrl[i] = Object.assign({}, this.imgUrl[i], { name: JuBao[i].name, url: [] })
          for (let j = 0; j < JuBao[i].fileName.length; j++) {
            this.fileItem[i].fileName[j] = JuBao[i].fileName[j]
          }
        }
        for (let i = 0; i < url.length; i++) {
          // this.jbFile[i].name = url[i].pop()
          this.jbFile[i] = Object.assign({}, this.jbFile[i], { name: url[i].pop(), url: [] })
          for (let j = 0; j < url[i].length; j++) {
            const arrItem = url[i][j]
            this.jbFile[i].url[j] = arrItem
            const res = await getJuBaoFile(this.jbFile[i].url[j])
            if (this.jbFile[i].name === this.fileItem[i].name) {
              this.type = this.fileItem[i].fileName[j].split('.')[1]
            }
            const blob = new Blob([res], { type: this.type })
            this.imgUrl[i].url[j] = window.URL.createObjectURL(blob)
          }
        }
        const item = this.imgUrl.filter((item) => item.name === res.name)
        if (item[0].url.length > 0) {
          const a = document.createElement('a')
          a.style.display = 'none'
          for (let i = 0; i < item[0].url.length; i++) {
            a.download = res.fileName[i]
            a.href = item[0].url[i]
            a.click()
          }
        }
      }
    },
    handleTb (n, res) {
      this.getJuB(this.juBao, this.url, res)
      // const item = this.imgUrl.filter((item) => item.name === res.name)
      // if (item[0].url.length > 0) {
      //   const a = document.createElement('a')
      //   a.style.display = 'none'
      //   for (let i = 0; i < item[0].url.length; i++) {
      //     a.download = res.fileName[i]
      //     a.href = item[0].url[i]
      //     a.click()
      //   }
      // }
    },
    async changePsss (row) {
      const res = await updateCheck({ id: row.id, pass: '1' })
      this.show(res)
    },
    async changeUnPsss (row) {
      const res = await updateCheck({ id: row.id, pass: '-1' })
      this.show(res)
    },
    show (res) {
      if (res.isSuccess) {
        Notification({
          title: res.message + ' 请注意刷新',
          type: 'success'
        })
      } else {
        Notification({
          title: res.message + ' 请注意刷新',
          type: 'error'
        })
      }
      this.$store.commit('zbUn/setSearchInfo', { search: '', show: 3 })
      this.$router.go()
    },
    shenH (row) {
      this.form = row
      this.dialogFormVisible = true
    },
    changePage (page) {
      if (page === this.page) {
        const n = this.juBao % 5
        this.juBPage = this.juBao.slice(5 * (page - 1), 5 * (page - 1) + n)
      }
      this.juBPage = this.juBao.slice(5 * (page - 1), 5 * (page - 1) + 5)
    }
  }
}
</script>

<style lang="less" scoped>
.dialog_footer {
  height: 3rem;
  line-height: 3rem;
  text-align: center;
}
.xians {
  text-align: left;
}
  .zb_nr {
    width: 100%;
    border-top: 1px solid;
    .table {
      width: 95%;
      margin-left: 2%;
      margin-bottom: 2%;
    }
  }
  .pass {
  color: red;
}
.unPass {
  color: rgb(193, 193, 193);
}
</style>
